﻿extends layout

block content
  h1= title
  p Welcome to #{title}
  p Time Now:
    a(id = "time_now")
  table(class="table" id= "table1")
    thead
      tr
        th(scope="col") 名称
        th(scope="col") 内存占用（MB）
        th(scope="col") 上传(Kb/s)
        th(scope="col") 下载(Kb/s)
        th(scope="col") 上报时间(客户端时间)
        th(scope="col") 状态
    tbody
  div(class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true")
    div(class="modal-dialog")
      div(class="modal-content centered"  style="width: 800px;height:600px;")
        div(class="modal-header")
          h5 graph
          button( type="button" class="close" data-dismiss="modal" aria-label="Close")
            span(aria-hidden="true") &times;
        div(class="modal-body")
          div( id="main" style="width: 600px;height:400px;")
  div(class="modal fade" id="staticBackdrop1" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel1" aria-hidden="true")
    div(class="modal-dialog")
      div(class="modal-content centered"  style="width: 800px;height:600px;")
        div(class="modal-header")
          h5 graph
          button( type="button" class="close" data-dismiss="modal" aria-label="Close")
            span(aria-hidden="true") &times;
        div(class="modal-body")
          img(src = "./bubble.png" id="rximg")

  script(src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js")
  script.
    var watcher = "";
    var data1 = [];
    var date1 = [];
    function showimg(ele){
      $("#rximg").attr("src", "./"+ele+".png");
    }
    function render(ele) {
      console.log(ele)
      watcher = ele;
      data1 = [];
      date1 = [];
    }
    var first = true;
    // 打开一个WebSocket:
    var myChart = echarts.init(document.getElementById('main'));
    var ws = new WebSocket("#{ws_path}");

    // 响应onmessage事件:
    ws.onmessage = function (msg) {
      try {
        var data = JSON.parse(msg.data);
        //console.log(data)
        if (first) {
          for (var temp in data) {
            $("#table1").append("<tr id=\"" + temp + "\">" + "</tr>")
          }
          first = false;
        }
        if (watcher != "") {

          date1.push(new Date())
          data1.push(data[watcher].status.rx)
          var option = {
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: date1
            },
            yAxis: {
              boundaryGap: [0, '50%'],
              type: 'log',
              min: 1,
              logBase: 2
            },
            series: [{
              name: '速度',
              type: 'line',
              smooth: true,
              symbol: 'none',
              stack: 'a',
              areaStyle: {
                normal: {}
              },
              data: data1
            }]
          }
          myChart.setOption(option);
        }
        for (var temp in data) {
          //$("#"+temp).remove()
          var date = new Date(data[temp].status.time * 1000);
          if (watcher != "" && temp == watcher) {
            date1.push(date)
            data1.push(data[temp].status.rx)
            myChart.setOption({
              xAxis: {
                data: date1
              },
              series: [{
                name: '速度',
                data: data1
              }]
            });
          }
          var interval = (Date.now() - data[temp].status.time * 1000);
          var server_down = "在线";
          var status_color = "green";
          if (interval > 5000 && interval <= 10000) {
            server_down = "失联";
            status_color = "blue";
          } else if (interval > 10000) {
            server_down = "离线";
            status_color = "red"
          }
          var txt1 = "<td> <button type=\"button\" onclick=\"showimg(" + temp + ")\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#staticBackdrop1\">" + data[temp].name + "</button>"+ "</td>" 
          var txt2 = "<td>" + data[temp].status.mem + "</td>" + "<td>" + data[temp].status.tx + "</td>" + "<td> <button type=\"button\" onclick=\"render(" + temp + ")\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#staticBackdrop\">" + data[temp].status.rx  + "</button>" +"</td>" + "<td>" + date.toLocaleString() + "</td>" + "<td id=\"" + temp + "status" + "\">" + "<font face=\"arial\" color=\"" + status_color + "\">" + server_down + "</font>" + "</td>"
          $("#" + temp).html(txt1+txt2);

        }
      } catch (e) {
        //console.log(msg)
        console.log(e)
      }
    };
    setInterval(() => {
      $("#time_now").text(new Date())
    }, 1000);